<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <div ref="chart1" style="height: 400px"></div>
      </el-col>
      <el-col :span="12">
        <div ref="chart2" style="height: 400px"></div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <baidu-map
          class="map"
          center="合肥"
          :zoom="15"
          scroll-wheel-zoom="true"
        >
          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </baidu-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "DashBoard",
  data() {
    return {
      lineChart: null,
      pieChart: null,
    };
  },

  methods: {
    initLine() {
      const lineChart = this.$echarts.init(this.$refs.chart1);
      const data = [
        {
          item: "衬衫",
          profit: 9,
          sale: 12,
        },
        {
          item: "裤子",
          profit: 6,
          sale: 15,
        },
        {
          item: "袜子",
          profit: 3,
          sale: 12,
        },
        {
          item: "帽子",
          profit: 9,
          sale: 3,
        },
        {
          item: "丝袜",
          profit: 6,
          sale: 3,
        },
        {
          item: "打底裤",
          profit: 18,
          sale: 12,
        },
      ];
      const option = {
        title: {
          text: "",
        },
        legend: {},
        // 提示文案
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          // formatter: '{a0}-{b0}-{c0} 件 <br/> {a1}-{b1}-{c1} 元'
          formatter: (params) => {
            return `
              <div>
                <div>
                   ${params[0].seriesName}
                   :
                   ${params[0].axisValueLabel}
                   :
                   ${params[0].data.sale}
                   件
                </div>
                <div>
                   ${params[1].seriesName}
                   :
                   ${params[1].axisValueLabel}
                   :
                   ${params[1].data.profit}
                   元
                </div>
              </div>
            `;
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: 60,
            margin: 10,
          },
        },
        yAxis: {},
        series: [
          {
            smooth: true,
            name: "销量",
            type: "line",
          },
          {
            name: "利润",
            type: "bar",
          },
        ],
        dataset: {
          dimensions: ["item", "sale", "profit"],
          source: data,
        },
        backgroundColor: "#f1f1f1",
      };
      lineChart.setOption(option);
      this.lineChart = lineChart;
    },

    initPie() {
      const pieChart = this.$echarts.init(this.$refs.chart2);
      const option = {
        legend: {
          top: "8%",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            type: "pie",
            radius: [30, 150],
            center: ["50%", "60%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 15,
            },

            // labelLine: {
            //   show: false
            // },
            // label : {
            //   show : false
            // },

            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              { value: 26, name: "rose 6" },
              { value: 22, name: "rose 7" },
              { value: 18, name: "rose 8" },
            ],
          },
        ],
        backgroundColor: '#f1f1f1'
      };


      pieChart.setOption(option);
      this.pieChart = pieChart;
    },
  },
  mounted() {
    this.initLine();
    this.initPie();
    window.onresize = () => {
      this.lineChart.resize();
      this.pieChart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.map {
  margin: 20px auto;
  width: 100%;
  height: 600px;
}
</style>
